// import { init, h } from 'snabbdom'
// import { propsModule } from 'snabbdom/modules/props'
// let patch = init([propsModule]);
export default class Vue {
	constructor(options) {
		this.vnode = null;
		this.oldNode = null;
		this.saveNode = null;
		this.$options = options
		if (options) {
			if (options.data) {
				this.$data = options.data();
				this.setData(this.$data);
			}
		}
		setTimeout(() => {
			this.run()
		});
		this.idCount = 0;
		this.parseMap = {};
	}
	setData(data) {
		let that = this;
		if (typeof data == 'object') {
			for (let key in data) {
				Object.defineProperty(this, key, {
					enumerable: true,
					configurable: true,
					get() {
						if (key in that.$data) {
							return that.$data[key]
						}
					},
					set(setData) {
						if (that.$data[key] !== setData) {
							that.$data[key] = setData;
							this.traversing()
						}
					}
				})
			}
		}
	}
	$set(target, key, value) {}
	traversing() {
		let that = this;
		let creatEl = document.createElement('div');
		let creatElChild = null;
		for (let item in this.$options.component) {
			creatEl.innerHTML = this.$options.component[item].template;
		}
		let instructions = [];
		creatElChild = creatEl.children;
		this.saveNode = creatElChild;
		for (let child of creatElChild) {
			let instruction2 = child.attributes;
			child.id = this.idCount;
			this.idCount++;
			//遍历指令
			for (let instr3 of instruction2) {
				if (instr3['nodeName'] == 'v-html') {
					child.innerHTML = this.$data[instr3['nodeValue']]
				}
				if (instr3['nodeName'] == 'v-model') {
					if (this.$data[instr3['nodeValue']]) {
						child.value = this.$data[instr3['nodeValue']];
					}
					child.addEventListener('input', function() {
						that.$data.inputValue = this.value;
						that.parseText()
					})
				}
				if (instr3['nodeName'] == '@click') {
					let reg = /(.+)\(/;
					let reg2 = /\((.+)\)/;
					let str = instr3['nodeValue'];
					let fnName = str.match(reg)[1];
					let fnMsg = str.match(reg2)[1];
					child.addEventListener('click', function() {
						that.$options.method[fnName].call(that, fnMsg)
					})
				}

			}
			child.removeAttribute('v-html')
			child.removeAttribute('@click')
			child.removeAttribute('v-model')
		}
		document.querySelector(this.$options.el).innerHTML = null;
		let len = creatElChild.length;
		for (let i = 0; i < len; i++) {
			//添加一个少一个，所以不能用i
			document.querySelector(this.$options.el).appendChild(creatElChild[0])
		}
		this.parseText()
	}
	parseText() {
		let el = document.querySelector(this.$options.el).children;
		for (const key in el) {
			const element = el[key];
			if (element.innerText || this.parseMap[element.id] && this.parseMap[element.id].templateText) {
				let text = '';
				if (!this.parseMap[element.id]) {
					this.parseMap[element.id] = {
						templateText: element.innerText
					}
					for (let dataEl in this.$data) {
						if (element.innerText.indexOf(`{{${dataEl}}}`) > -1) {
							text = element.innerText.replace(`{{${dataEl}}}`, this.$data[dataEl])
							element.innerText = text
						}
					}
				} else {
					let str = this.parseMap[element.id].templateText;
					for (let dataEl in this.$data) {
						if (str.indexOf(`{{${dataEl}}}`) > -1) {
							text = str.replace(`{{${dataEl}}}`, this.$data[dataEl])
							element.innerText = text
						}
					}
				}
			}
		}
	}
	run() {
		let app = null;
		let component = [];
		if (this.$options.el) {
			app = document.querySelector(this.$options.el)
		}
		if (this.$options.component) {
			this.traversing();
		}
		if (this.$options.mounted) {
			this.$options.mounted.call(this);
		}
	}
}
